<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入jQuery -->
		<script src="jquery-3.7.1.js" type="text/javascript" charset="utf-8"></script>
		
		<style type="text/css">
			div{
				width: 200px;
				height: 100px;
				background-color: lightblue;
				margin: 10px;
			}
			
			.two
			{
				background-color: greenyellow;
			}
		</style>
	</head>
	<body>
		
		<div id="div01"></div>
		<div id="div02"></div>
		<div id="div03"></div>
		<div id="div04"></div>
		<div id="div05"></div>
		<div id="div06">
			<input type="text" id="input06"/>
		</div>
		
		<script type="text/javascript">
			
			// $(选择题)
			
			// 设置样式
			// .css()
			// $("div").css("background-color","red");			
			$("#div02").css("background-color","blue");
			
			// 添加事件
			$("#div03").click(function(){
				alert("div03点击了");
			});
			
			// 修改内容
			$("#div04").html("<a href='https://www.baidu.com'>百度</a>");
			$("#div05").text("<a href='https://www.baidu.com'>百度</a>");
			$("#input06").val("哈哈");
			
			// 修改属性
			$("#div06").attr("class","two");
			$("#div06").removeAttr("class");
			// $("#div06").addClass("two");
			// $("#div06").removeClass("two");
		</script>
		
	</body>
</html>
